<template>
  <div class="bg-white player-container h-80 d-al px-20 jt-sb">
    <div class="d-al">
      <el-avatar shape="square" :size="80" :src="currentSong?.alPic || '' " />
      <div class="d-flex flex-d-col jt-se h-80 ml-8 text-left">
        <el-text class="song-name">{{ currentSong?.name || '' }}</el-text>
        <div class="artists-name text-left">{{ currentSong?.artistName || '' }}</div>
        <img :src="likeOrNotLike" alt="图标" height="16" width="16" @click="toggleLike" />
      </div>
    </div>
    <div class="w-300 d-flex flex-d-col">
      <div class="d-al jt-sb w-160" style="margin: 0 auto">
        <img src="@renderer/assets/icon/skip-back.svg" alt="" @click="prevSong" />
        <img :src="playOrStop" class="c-pointer" alt="" @click="togglePlay" />
        <img src="@renderer/assets/icon/skip-next.svg" alt="" @click="nextSong" />
      </div>
      <el-progress
        :percentage="(currentTime / duration) * 100 || 0"
        color="#115DEF"
        width="256"
        class="mt-10"
        stroke-width="4"
      />
    </div>
    <div class="d-flex">
      <img src="@renderer/assets/icon/volume.svg" alt="" @click="toggleMute" />
      <el-progress
        v-model="volume"
        :percentage="volume * 100"
        color="#115DEF"
        class="w-100 ml-12"
        :stroke-width="4"
      />
    </div>
    <audio
      ref="audioRef"
      :src="currentSong?.url || ''"
      @timeupdate="updateProgress"
      @ended="nextSong"
    ></audio>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, computed, watch, nextTick} from 'vue'
import play from '@renderer/assets/icon/play.svg'
import stop from '@renderer/assets/icon/stop.svg'
import heart1 from '@renderer/assets/icon/heart-1.svg'
import heart2 from '@renderer/assets/icon/heart-2.svg'
import { useSongStore } from '@renderer/store/song'
const songStore = useSongStore()

// 当前歌曲信息
const currentSong = computed(() => {
  return songStore.currentSong
})
// 歌曲列表
const songList = computed(() => {
  return songStore.songList
})
// 当前播放器状态
const playerStatus = computed(() => {
  return songStore.playerStatus
})
// 播放/停止图标
const playOrStop = computed(() => {
  return songStore.playerStatus.isPlaying ? stop : play
})
// 已经喜欢/还没喜欢图标
const likeOrNotLike = computed(() => {
  return songStore.playerStatus.isPlaying ? heart1 : heart2
})

// 监听是否要执行播放
watch(
  () => songStore.playerStatus.handlePlay,
  () => {
    if (audioRef.value) {
      togglePlay()
    }
  }
)

const audioRef = ref<HTMLAudioElement | null>(null)
const isLiked = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(0.4)

const togglePlay = () => {
  if (songStore.playerStatus.isPlaying) {
    audioRef.value?.pause()
  } else {
    audioRef.value?.play()
  }
  songStore.setPlaying()
}

const prevSong = () => {
  // currentSongIndex.value = (currentSongIndex.value - 1 + songList.value.length) % songList.value.length
  updateSong()
}

const nextSong = () => {
  // currentSongIndex.value = (currentSongIndex.value + 1) % songList.value.length
  updateSong()
}

const updateSong = () => {
  audioRef.value?.load()
  if (playerStatus.value.isPlaying) {
    audioRef.value?.play()
  }
}

const updateProgress = () => {
  if (audioRef.value) {
    currentTime.value = audioRef.value.currentTime
    duration.value = audioRef.value.duration
  }
}

const toggleLike = () => {
  isLiked.value = !isLiked.value
}

const toggleMute = () => {
  if (audioRef.value) {
    audioRef.value.muted = !audioRef.value.muted
    isMuted.value = audioRef.value.muted
  }
}

onMounted(() => {
  if (audioRef.value) {
    audioRef.value.volume = volume.value
  }
})
</script>

<style scoped lang="less">
.player-container {
  backdrop-filter: blur(20px);
  .song-name {
    font-size: 14px;
    font-weight: 700;
    color: #191f35;
  }
  .artists-name {
    font-size: 10px;
    color: rgba(25, 31, 53, 0.48);
    font-weight: 500;
  }
}
</style>
